<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>表格</title>

    <link rel="stylesheet" href="https://www.layuicdn.com/layui/css/layui.css">
    <script src="https://www.layuicdn.com/layui/layui.js"></script>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>

<div class="demoTable">
    搜索姓名：
    <div class="layui-inline">
        <input class="layui-input" name="id" id="demoReload" autocomplete="off">
    </div>
    <button class="layui-btn" data-type="reload" id="searchBtn">搜索</button>
</div>

<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="add">+添加</button>
    </div>
</script>

<table class="layui-hide" id="demo" lay-filter="test"></table>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">受理</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit2">回访</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script>

    layui.use([ 'laypage', 'layer', 'table'], function(){
        var laypage = layui.laypage //分页
            ,layer = layui.layer //弹层
            ,table = layui.table;//表格


        //执行一个 table 实例
        table.render({
            elem: '#demo'
            ,height: 550
            ,url: 'listData2' //数据接口
            ,title: '用户表'
            ,page: true //开启分页
            ,toolbar: '#toolbarDemo' //开启工具栏，此处显示默认图标，可以自定义模板
            ,totalRow: true //开启合计行
            ,limits:[5,10,15]

            ,cols: [
                [ //表头

                    {field: 'complaintSuggestionId', title: '投诉编号', width:80, sort: true, fixed: 'left'}
                    ,{field: 'roomNo', title: '房间编号', width:80}
                    ,{field: 'complainant', title: '投诉人', width: 90, sort: true}
                    ,{field: 'complainantNumber', title: '投诉人联系方式', width:150, sort: true}
                    ,{field: 'complainantType', title: '投诉类型', width: 150, sort: true}
                    ,{field: 'complainantTime', width:80, title: '投诉时间'}
                    ,{field:'complainantEventDescription', width:100, title: '投诉事件描述'}
                    ,{field:'complainantProcessingState', width:80, title: '投诉处理状态',
                        templet: function(res){
                            if(res.complainantProcessingState == 0){
                                return "已处理";
                            }else if(res.complainantProcessingState == 1){
                                return "已回访";
                            }else{
                                return "未处理";
                            }
                        }
                    }
                    ,{field:'dealingWithPeople', title: '处理人', width: 100} //minWidth：局部定义当前单元格的最小宽度，layui 2.2.1 新增
                    ,{field:'dealingWithTime',width:100, title: '处理时间'}
                    ,{field:'dealingWithRemarks', width:100,title: '处理备注'}
                    ,{field:'visitor',width:100, title: '回访人'}
                    ,{field:'revisitDays',width:100, title: '回访时间'}
                    ,{field:'returnNotes',width:100, title: '回访备注'}
                    ,{field:'degreeOfSatisfaction',width:100, title: '满意程度'}
                    ,{field:'finishedState',width:100, title: '完成状态',
                        templet: function(res){
                            if(res.finishedState == 0){
                                return "已完成";
                            }else{
                                return "未完成";
                            }
                        }
                    }
                    ,{fixed: 'right', width: 165, align:'center', toolbar: '#barDemo'}
                ]
            ]
            , id: 'listData2'
        });

        // //监听头工具栏事件
         table.on('toolbar(test)', function(obj){
             var checkStatus = table.checkStatus(obj.config.id)
                 ,data = checkStatus.data; //获取选中的数据
             switch(obj.event){
                 case 'add':
                     //添加
                     layer.open({
                         type:2,      //layer的5种层类型   0（信息框，默认）、1（页面层）、2（iframe层）、3（加载层）、4（tips层）
                         title: ['新增投诉单', 'font-size:18px;'],  //弹出框标题
                         area: ['600px','500px'],    //设置弹框的大小
                       shadeClose:true,          //点击遮罩层外区域关闭遮罩层
                         offset:'t',
                        anim: 2,              //弹出动画
                        content:'addComplaint'     //写方法的路径  进入页面  此处也和easyui相同
                     })
                     break;
            };
        });
        //监听行工具事件
        table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data //获得当前行数据
                ,layEvent = obj.event; //获得 lay-event 对应的值
            //修改 受理
            if(layEvent === 'edit'){
                layer.open({
                    type: 2, //layer的5种层类型   0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
                    title: ['受理', 'font-size:18px;'],  //弹出框标题
                    shade: [0.5, '#393D49'],     //遮罩层
                    shadeClose:true,          //点击遮罩层外区域关闭遮罩层
                    offset:'t',
                    area: ['580px', '500px'],    //弹出框大小
                    anim: 1,              //弹出动画
                    content:'selectComplaintSuggestionById?complaintSuggestionId='+data.complaintSuggestionId
                });
            }
            //修改 回访
            if(layEvent === 'edit2'){
                layer.open({
                    type: 2, //layer的5种层类型   0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
                    title: ['回访', 'font-size:18px;'],  //弹出框标题
                    shade: [0.5, '#393D49'],     //遮罩层
                    shadeClose:true,          //点击遮罩层外区域关闭遮罩层
                    offset:'t',
                    area: ['580px', '500px'],    //弹出框大小
                    anim: 1,              //弹出动画
                    content:'selectComplaintSuggestionById2?complaintSuggestionId='+data.complaintSuggestionId
                });
            }
            //删除
            if(layEvent === 'del'){
                //操作
                layer.confirm('真的要删除吗？', function () {
                    $.post("delete2",{'complaintSuggestionId':data.complaintSuggestionId},function(result)
                        {
                            layer.msg(
                                result.msg, {
                                    icon: 1,
                                    time: 1000 //2秒关闭（如果不配置，默认是3秒）
                                }, function(){
                                    //刷新父页面
                                    obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                                    layer.close(index);
                                });
                        }
                    );
                });
            }
        });

        //分页
        laypage.render({
            elem: 'pageDemo' //分页容器的id
            ,count: 100 //总页数
            ,skin: '#1E9FFF' //自定义选中色值
            //,skip: true //开启跳页
            ,jump: function(obj, first){
                if(!first){
                    layer.msg('第'+ obj.curr +'页', {offset: 'b'});
                }
            }
        });

      //执行条件查询
        /*条件查询按钮*/
        var $ = layui.$;
        $('#searchBtn').on('click', function(){
            //获取输入框
            var demoReload = $('#demoReload');
            //执行重载
            table.reload('listData2', {
                page: {
                    curr: 1 //重新从第 1 页开始
                }
                ,where: {
                    complainant: demoReload.val()
                }
            });
        });

    });
</script>
</body>
</html>